<template>
  <view class="uni-container">
    <uni-forms ref="formRef" v-model="formData" :rules="rules" validateTrigger="blur">
      <uni-forms-item name="type" label="类型" required>
        <iss-dict-select v-model="formData.type" dictType='SwiperType' 
                         placeholder='请选择类型'/>
      </uni-forms-item>
      <uni-forms-item name="picurl" label="轮播图图片" required>
        <iss-image-upload 
          v-model="formData.picurl" 
          upload-path="wallpaper/swipers"
          ref="imageUploadRef"
          :max-width="1920"
          :max-height="1080"
        />
      </uni-forms-item>
      <uni-forms-item name="description" label="描述">
        <uni-easyinput v-model="formData.description" placeholder="请输入轮播图描述"/>
      </uni-forms-item>
      <uni-forms-item name="sort" label="排序" required>
        <uni-easyinput v-model="formData.sort" type="number" placeholder="请输入排序值"/>
      </uni-forms-item>
      <uni-forms-item name="target" label="跳转目标" required>
        <uni-data-select
          v-model="formData.target"
          :localdata="targetOptions"
          :clear="false"
          placeholder="请选择跳转目标"
        />
      </uni-forms-item>
      <uni-forms-item name="url" label="跳转链接">
        <uni-easyinput v-model="formData.url" placeholder="请输入跳转链接"/>
      </uni-forms-item>
      <uni-forms-item name="enable" label="是否启用">
        <switch @change="binddata('enable', $event.detail.value)" :checked="formData.enable" />
      </uni-forms-item>
      <view class="uni-button-group">
        <button style="width: 100px;" type="primary" class="uni-button"
                @click="submitForm">{{$t('common.button.submit')}}</button>
        <button style="width: 100px; margin-left: 15px;"
                class="uni-button" @click="navigateBack(false)">{{$t('common.button.back')}}</button>
      </view>
    </uni-forms>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { cloudIdToUrl } from '@/utils/common.js'
import IssImageUpload from '@/components/iss-image-uplaod/iss-image-uplaod.vue'
import { useForm } from '@/utils/composable'

const wallpaperSwiperObj = uniCloud.importObject("iss-wallpaper")

const formRef = ref(null)
const imageUploadRef = ref(null)

// 跳转目标选项
const targetOptions = ref([
  { text: '内部跳转', value:'self' },
  { text: '外部跳转', value: 'out' }
])

// 表单数据
const formData = ref({
  picurl: '',
  type: '',
  description: '',
  sort: 0,
  target:'self',
  url: '',
  enable: true
})

const rules = ref({
  picurl: {
    rules: [{
      required: true,
      errorMessage: '请上传{label}',
    }],
    label: '轮播图图片'
  },
  type: {
    rules: [{
      required: true,
      errorMessage: '请选择{label}',
    }],
    label: '类型'
  },
  sort: {
    rules: [{
      required: true,
      errorMessage: '请输入{label}',
    }]
  }
})

const {submitForm,navigateBack} = useForm({
  title: '轮播图',
  formRef,
  formData,
  doc: wallpaperSwiperObj.doc_swiper,
  add: wallpaperSwiperObj.add_swiper,
  update: wallpaperSwiperObj.update_swiper,
  // 获取数据后的钩子
  onGetDataSucceed: (data)=>{
    // 将云存储ID转换为可访问的URL
    if(data.picurl) {
      let url = cloudIdToUrl(data.picurl)
      formData.value.picurl = url
    }
  },
  // 在表单校验成功之后，在提交formData到数据库之前，需要做的异步操作
  beforeSubmitOptAsync: async () => {
    await imageUploadRef.value.uploadImage()
  }
})
</script>

<style lang="scss" scoped>
::v-deep .uni-forms-item__label {
  width: 90px !important;
}
</style>    